
<template>
  <div class="merchantsList">

    <div class="head">

        <div class="head_ul" v-loading="loading" >
          <div class="head_li">
            <div class="title">
              已售参保卡
              <el-tooltip class="explain" popper-class="explain_detail" effect="dark" content="消费者购买已参保卡数量" placement="top">
                 <span>?</span>
              </el-tooltip>
            </div>
            <div class="num ellipseHide">
              {{ info.alreadyInsuranceCardTotal }}<span class="numtxt">张</span>
            </div>
          </div>

          <div class="head_li">
            <div class="title">
              购卡金额
               <el-tooltip class="explain" popper-class="explain_detail" effect="dark" content="消费者购卡支付的金额" placement="top">
                 <span>?</span>
              </el-tooltip>
            </div>
            <div class="num ellipseHide">
              <span class="numtxt">¥</span>{{ info.useInsuranceMerchantMoneyTotal }}
            </div>
          </div>

          <div class="head_li">
            <div class="title">
              现金余额
               <el-tooltip class="explain" popper-class="explain_detail" effect="dark" content="消费着卡内剩余现金余额之和" placement="top">
                 <span>?</span>
              </el-tooltip>
            </div>
            <div class="num ellipseHide">
              <span class="numtxt">¥</span>{{ info.cashMoney }}
            </div>
          </div>

          <div class="head_li" style="border: 0">
            <div class="title">
              监管金额
                 <el-tooltip class="explain" popper-class="explain_detail" effect="dark" content="消费者卡内监管金额之和" placement="top">
                 <span>?</span>
              </el-tooltip>
            </div>
            <div class="num ellipseHide">
              <span class="numtxt">¥</span>{{ info.superviseMoney }}
            </div>
          </div>

        </div>

    </div>


    <div class="main">
    <div class="main_top">
      <el-form :inline="true" :model="filter" class="demo-form-inline">
        
        <el-form-item label="" >
          <el-input
            v-model="filter.query"
            style="width: 220px;"
            placeholder="店铺名称/卡名称/姓名/手机号"
          ></el-input>
        </el-form-item>

        <el-form-item label="卡类型：">
          <el-select v-model="filter.cardType" placeholder="全部">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="卡状态：">
          <el-select v-model="filter.customerCardStatus" placeholder="全部">
            <el-option
              v-for="item in statusOptions"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="购卡时间：">
           <el-date-picker
                v-model="cardTime"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>

      
        <el-form-item>
          <el-button type="primary" @click="Search">搜索</el-button>
          <el-button @click="setReset">重置</el-button>
        </el-form-item>
      </el-form>
    
      <div>
          <export-excel-button
          title="保险承保卡明细列表"
          action="/insurance/card/v1/export"
          :params="ExportParams"
        />
      </div>
      

     </div>
      
      <ex-table
        ref="table"
        :loading="loading"
        :table-column="tableColumn"
        :table-data="tableData"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      >
        <template v-slot:validityTypeDict="{ scope }">
          <div v-if="scope.row.cardType == 9 && scope.row.validityType == 19">{{scope.row.usableCount}}天</div>
          <div v-else>{{scope.row.validityTypeDict}}</div>
        </template>
        <template v-slot:operate="{ scope }">
          <el-link type="primary" @click="lookDetail(scope.row.customerCardId)" >卡详情</el-link>
        </template>
      </ex-table>
    </div>

    <detail-dialog
      v-if="detailDialog"
      :id="id"
      :visible.sync="detailDialog"
      @success="_handleSuccess"
    />
  </div>

</template>
<script>
// import { mapState } from "vuex";
// components

import ExportExcelButton from "@/components/ExportExcelButton/index";
import DetailDialog from "./components/DetailDialog";
// api
import { adminDict } from "@/api/setting";
import { getInsuranceV1List} from "@/api/insuranceUnderwriting";

// mixins
import handlePageMixin from "@/mixins/handlePageMixin";

export default {
  name: "NewIncreaseVerify",
  components: { ExportExcelButton,DetailDialog },
  mixins: [handlePageMixin],
  computed: {
    // ...mapState({
    //   statusList: function (state) {
    //     return state.common["merchant_apply_status"]; // 要取this的实例，只能用不同函数，不能用箭头函数
    //   },
    //   industryStatusType: function (state) {
    //     return state.common["industry_type"]; // 要取this的实例，只能用不同函数，不能用箭头函数
    //   },
    // }),
    ExportParams() {
      const params = {
        ...this.pageOptions,
        ...this.filter,
      };
      return params;
    },
  },
  data() {
    return {
      id:'',
      info: { }, // 头部数据
      detailDialog: false, //弹窗
      options: [], //卡类型
      statusOptions:[], //卡状态
      cardTime:[],   //购卡时间
      loading: false,
      tableColumn: [
        { prop: "shopName", label: "店铺名称", width: "180" },
        { prop: "cardTypeDict", label: "卡类型", width: "100" },
        { prop: "cardName", label: "卡名称", width: "150" },
        {  slot: true, slotName: "validityTypeDict", label: "有效期", width: "120" },
        { prop: "name", label: "姓名", width: "120" },
        { prop: "phone", label: "手机号码", width: "120" },
        { prop: "idCard", label: "身份证号", width: "180" },
        { prop: "createTime", label: "购卡时间", width: "160" },
        { prop: "statusDict", label: "卡状态", width: "150" },
        { prop: "buyMoney",label: "购卡金额（￥）",width: "150"},
        { prop: "balanceMoney",label: "卡余额",width: "150"},
        { prop: "cashBalanceMoney",label: "现金余额(￥)",width: "150"},
        { prop: "superviseMoney", label: "监管金额（￥）", width: "150" },
        {
          label: "操作",
          slot: true,
          slotName: "operate",
          width: "100",
          fixed: "right",
        },
      ],
      // 搜索数据
      filter: {
        query:'', //店铺名称/卡名称/姓名/手机号
        cardType:'', //卡类型
        customerCardStatus:'',//用户卡状态
        buyStartTime:'', //购卡开始时间
        buyEndTime: '', //购卡结束时间
      },
      tableData: [], //数据列表
      total:'',//总数
    };
  },

  created() {
    this.getlinkagelist();
    this.getstatuslist();
    this.getList();
  },
  methods: {
    getlinkagelist() {
      //获取卡类型字典
      const params = {
        dictType: "asset_card_type",
      };
      adminDict(params).then((res) => {
        var arr = [
          {
            id: '',
            value: "全部",
          },
        ];
        this.options = arr.concat(res.result[0].dictList);
        this.options.splice(5,3)
        console.log("this.options", this.options);
      });
    },
      //获取卡状态状态字典
    getstatuslist() {
      const params = {
        dictType: "customer_card_status",
      };
      adminDict(params).then((res) => {
        var arr = [
          {
            id: '',
            value: "全部",
          },
        ];
        this.statusOptions = arr.concat(res.result[0].dictList);
        // console.log("this.options", this.options);
      });
    },
    handleChange(value) {
      let _this = this;
      console.log("value+++++++++++++", value[1]);
      _this.filter.shopType = value[1];
    },

    //查看详情
    lookDetail(id) {
      //  console.log(id)
       this.id = id
       this.detailDialog = true
    },
    _handleSuccess() {
    //   this.getList();
    //   this.getNum();
      this.detailDialog = false;
    },
    //列表tablDA
    getList() {
      this.loading = true;
      const params = {
        ...this.pageOptions,
        ...this.filter,
      };

      getInsuranceV1List(params)
        .then((res) => {
          const {insuranceCardPage ,insMerchantInsuranceTotalDTO} = res.result
          const { total, records } = insuranceCardPage;

          this.info = insMerchantInsuranceTotalDTO
          this.total = total
          this.$refs.table.pageOptions.total = total;
          this.tableData = records;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    //重置
    setReset() {
      this.filter = {};
      this.cardTime = [] 
      this.pageOptions.pageNum = 1;
      // this.currentNavtab = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
    //搜索
    Search() {
      if (this.cardTime) {
          this.filter.buyStartTime = this.cardTime[0];
          this.filter.buyEndTime = this.cardTime[1];
      }
      this.pageOptions.pageNum = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./style/merchantsList";

</style>